<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		 <!-- 
		 组件注意事项：
		 （1）data必须是函数
		 （2）如果有多个标签必须使用div包含
		 （3）所有组件全部放在#app里面
		 （4）当模板比较复杂时，只有模板字符串``来进行处理
		 -->
		 
		 <!-- 
			组件命名：
			如果组件命名是大写也就是使用驼峰方式，写在#app时，需要使用短横线
			
			-->
		 
		<div id="app">
			<cmp></cmp>
			<!-- 注意这里的写法 -->
			<hello-world></hello-world>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			Vue.component('HelloWorld', {
				data: function() {
					return {
						msg: '己所不欲勿施于人'
					}
				},
				template: `
				<h1>
				  {{msg}}
				</h1>
				`
			})
			Vue.component('cmp', {
				data: function() {
					return {
						
					}
				},
				<!-- 注意这里的写法 -->
				template: '<div><h1>程序猿</h1><HelloWorld></HelloWorld></div>',
				methods: {
					
				}
			})
			var vm = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {}
			})
		</script>
	</body>
</html>

